<template>
    <div class="thumb px-4 h-full">
        <div class="item mt-6">
            <div class="title mb-2">选择题型</div>
            <div class="select-topic-type p-3">
                <div class="color-gray mb-3">点击下方题型</div>
                <div class="list" :id="domId">
                    <div 
                    v-for="item in topicTypeList"
                    :key="item.name"
                    @click="onSelect(item)" 
                    :data-type="item.type"
                    class="type-item flex items-center px-3"
                    >
                        <img :src="item.icon" class="icon mr-2">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onActivated, onMounted, ref } from 'vue';
import IconTopicAnswer from '@/Assets/Images/IconTopicAnswer.svg';
import IconTopicCheckbox from '@/Assets/Images/IconTopicCheckbox.svg';
import IconTopicTrueFalse from '@/Assets/Images/IconTopicTrueFalse.svg';
import { createUuid } from '@/Utils/utils';
import Sortable from 'sortablejs';
import { useRoute } from 'vue-router';

const emit = defineEmits(['add', 'setCategoryId', 'move', 'end']);

const props = defineProps<{
    detail: any;
}>();

const domId = createUuid();

const route = useRoute();

const topicTypeList = ref([
    {
        name: '填空题',
        type: 1,
        icon: IconTopicAnswer,
    },
    {
        name: '选择题',
        type: 2,
        icon: IconTopicCheckbox,
    },
    {
        name: '计算题',
        type: 3,
        icon: IconTopicAnswer,
    },
    {
        name: '应用题',
        type: 4,
        icon: IconTopicAnswer,
    },
    {
        name: '判断题',
        type: 5,
        icon: IconTopicTrueFalse,
    },
]);

// 初始化拖拽
const initSortable = () => {
    const dom = document.getElementById(domId);
    // console.log('dom: ', dom);
    if (dom) {
        new Sortable(dom, {
            group: {
                name: 'template',
                pull: 'clone',
                put: false // 不允许拖拽进这个列表
            },
            sort: false,
            filter: ".icon",
            draggable: ".type-item",
            // disabled: true,
            animation: 150,
            onMove: () => emit('move'),
            onEnd: () => emit('end')
        });
    }
};

// 点击题类型
const onSelect = (item: any) => {
    // console.log(item);
    emit('add', item.type);
};

const onShow = () => {
    // initSortable();
};

onActivated(onShow);

onMounted(onShow);
</script>

<style lang="scss" scoped>
.thumb {
    width: 300px;
    border-right: 1px solid #E8E8E6;
    .color-red {
        color: rgb(255, 0, 0);
    }
    .select-topic-type {
        border-radius: 4px;
        border: 1px solid #E8E8E6;
        background: #FAFAF7;
        .list {
            .type-item {
                border-radius: 3px;
                border: 1px solid #DCDCDC;
                background: #FFF;
                height: 30px;
                cursor: pointer;
                &:not(:first-child) {
                    margin-top: 12px;
                }
            }
        }
    }
}
</style>